<script>
export default {
  created() {
    this.select_user()
  },
  data() {
    return {
      userData: {},
      msg: '',
      imageUrl: '',
    }
  },
  methods: {
    async select_user() {
      const { data: res } = await this.$http.get(
        '/flower-manage/select_user?userId=' + localStorage.getItem('userId')
      )
      this.userData = res.data
      this.msg = res.msg
      this.userData.userSex = this.userData.userSex + ''
      this.imageUrl = `${this.$api}/common/download/${this.userData.userImg}`
    },
    // 还原到未修改前
    revent_user() {
      this.select_user()
      this.$message.success(this.msg)
    },
    async update_user() {
      const { data: res } = await this.$http.post(
        '/flower-manage/update_user',
        this.userData
      )
      if (res.code === 1) {
        this.$message.success(res.data)
      } else {
        this.$message.error(res.msg)
      }
    },
    onSuccess(res, file) {
        // const {data : result } = await this.$http.post(this.update_url,file);
        // console.log(file);
        if(res.code === 1){
          // this.userData.userImg = res.data.file;
          this.imageUrl = `${this.$api}/common/download/${res.data}`
          this.userData.userImg = file.response.data;
        }else {
          this.$message.error("上传失败")
        }
      }, 
    // 用于判断图片格式和图片大小
    beforeAvatarUpload(file) {
        const isJPGANDPNG = file.type === 'image/jpeg' || 'image/png' || 'image/gif';
        const isLt5M = file.size / 1024 / 1024 < 5;
        if (!isJPGANDPNG) {
          this.$message.error('上传头像图片只能是 JPG/PNG/GIF 格式!');
        }
        if (!isLt5M) {
          this.$message.error('上传头像图片大小不能超过 5MB!');
        }
        return isJPGANDPNG && isLt5M;
      }
  },
}
</script>
<template>
  <div class="app">
    <h1>个人中心</h1>
    <table>
      <tr>
        <td>头像:</td>
        <td>
          <el-upload
            class="avatar-uploader"
            :action="$api+'/common/upload'"
            :show-file-list="false"
            :on-success="onSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </td>
        <td>账号:</td>
        <td><el-input v-model="userData.userAccount" disabled></el-input></td>
      </tr>
      <tr>
        <td>账号密码:</td>
        <td><el-input v-model="userData.userPassword"></el-input></td>
        <td>商家编号:</td>
        <td><el-input v-model="userData.userId" disabled></el-input></td>
      </tr>
      <tr>
        <td>昵称:</td>
        <td><el-input v-model="userData.userName"></el-input></td>
        <td>地区:</td>
        <td><el-input v-model="userData.userAddress"></el-input></td>
      </tr>
      <tr>
        <td>年龄:</td>
        <td><el-input v-model="userData.userAge"></el-input></td>
        <td>兴趣爱好:</td>
        <td><el-input v-model="userData.userHobby"></el-input></td>
      </tr>
      <tr>
        <td>个性签名:</td>
        <td><el-input v-model="userData.userSignature"></el-input></td>
        <td>性别:</td>
        <td>
          <el-radio v-model="userData.userSex" label="1">男</el-radio>
          <el-radio v-model="userData.userSex" label="2">女</el-radio>
        </td>
      </tr>
      <el-button class="retrun_btn" type="primary" @click="revent_user()" plain
        >还原</el-button
      >
      <el-button class="confirm_btn" @click="update_user()" type="success" plain
        >修改</el-button
      >
    </table>
  </div>
</template>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.app {
  position: relative;
  h1 {
    text-align: left;
    font-size: 30px;
    padding-left: 20px;
    padding-top: 10px;
  }
  table {
    width: 960px;
    height: 570px;
    position: absolute;
    top: 80px;
    left: 120px;
    padding: 0 20px 50px 0;
    border-spacing: 0; // 消除单元格与边框之间的缝隙
    .retrun_btn {
      position: absolute;
      bottom: 10px;
      left: 300px;
    }
    .confirm_btn {
      position: absolute;
      bottom: 10px;
      left: 500px;
    }
    tr td img {
      border: 1px solid #000;
      width: 150px;
      height: 150px;
      overflow: hidden;
      margin-left: 100px;
    }
    tr td:nth-child(even) {
      // 表示只选择双数
      text-align: left; // 设置内容往左边靠
    }
    tr td:nth-child(odd) {
      // 表示只选择奇数
      text-align: right; // 设置内容往右边靠
      padding-right: 10px;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
}
</style>
